<template>
  <div
    class="window-title-bar h-[var(--electron-window-titlebar-height)] flex items-center"
  >
    <div class="icon w-[20%] pl-[5px] py-[5px]">
      <img src="/vite.svg" class="w-[22px] h-[22px]" alt="Vite logo" />
    </div>
    <div class="title grow text-center py-[5px]">Electron Vue3 App</div>
    <div class="operation w-[20%] h-full flex justify-end items-center">
      <div class="buttons w-[100px] h-full">
        <i
          @click="send('windowMinimize')"
          class="mdi mdi-window-minimize hover:bg-gray-200"
        ></i>
        <i
          @click="send('windowMaximize')"
          class="mdi mdi-window-maximize hover:bg-gray-200"
        ></i>
        <i
          @click="send('windowClose')"
          class="mdi mdi-window-close hover:bg-red-500"
        ></i>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useIpcRenderer } from '@vueuse/electron';
// const send = window.ipc.send;
const send = useIpcRenderer().send;
</script>

<style lang="scss" scoped>
.window-title-bar {
  -webkit-app-region: drag;
  .operation {
    .buttons {
      -webkit-app-region: no-drag;
      i {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 33.33%;
      }
    }
  }
}
</style>
